<script lang="ts" setup>
import type { RouterVO } from '@/request/api/router'
import { useGlobalDialog } from '@/hooks'
import { initPageDTO, initPageVO, type PageDTO, type PageVO, type ResultType } from '@/type/type'
import {
  type ArticleDTO,
  type ArticleVO,
  getArticleAdminPageApi,
  initArticleDTO,
  initArticleVO,
  updateArticleApi
} from '@/request/api/article'
import { useSystemStore } from '@/stores/system'
import { ClassifyEnum, DialogEnum, RouteNameEnum } from '@/enum'

const { globalDialog } = useGlobalDialog()
const systemStore = useSystemStore()
const vo = ref<ArticleVO>(initArticleVO())
// 分页参数
let page = reactive<PageDTO>(initPageDTO())
// 多选框选中数据
const ids = ref<any[]>([])
/** 查询管理列表 */
const pageVO = ref<PageVO<ArticleVO>>(initPageVO())
const getList = () => {
  getArticleAdminPageApi(page).then((res: ResultType<PageVO<ArticleVO>>) => {
    pageVO.value = res.data
  })
}

// 多选框选中数据
function handleSelectionChange(selection: RouterVO[]) {
  ids.value = selection.map((item) => item.id)
}

const router = useRouter()

/** 新增 修改按钮操作 */
function handleUpdate(id: number) {
  router.push({ name: RouteNameEnum.ARTICLE_EDIT, params: { id } })
}

/** 启用停用按钮操作 */
const handleChangeStatus = async (id: number, status: boolean) => {
  const dto: ArticleDTO = initArticleDTO()
  dto.id = id
  dto.status = status
  const title = status ? '启用' : '停用'
  await globalDialog('确定' + title + ' ID 为"' + id + '"的文章?').then((res: boolean) => {
    if (res) {
      updateArticleApi(dto, []).then((res: ResultType<boolean>) => {
        if (res.data) {
          getList()
        }
      })
    }
  })
}

// 分页事件
const pageChange = (p: PageDTO) => {
  page = p
  getList()
}

onMounted(() => {
  getList()
})
</script>

<template>
  <el-container class="pt-5 gap-3" direction="vertical">
    <el-container class="pb-2 px-5" direction="vertical">
      <QueryForm
        :search="getList"
        :type="ClassifyEnum.ARTICLE"
        @update="
          (args: Record<string, any>) => {
            page.param = args
          }
        "
      />
      <el-container class="gap-3 flex-wrap">
        <el-button class="!px-2 !m-0" plain type="primary" @click="handleUpdate(-1)">
          <SvgIcon message="新增" name="add" />
        </el-button>
      </el-container>
    </el-container>
    <el-table :data="pageVO.list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="35" />
      <el-table-column label="标题" prop="title" />
      <el-table-column label="封面" width="120">
        <template #default="scope">
          <ImageBox
            :url="scope.row.cover"
            class="rounded"
            @click="systemStore.imgPreview.imgUrl = scope.row.cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="类别" prop="label.classifyName" />
      <el-table-column label="标签" prop="label.name" />
      <el-table-column label="评论" prop="commentCount" sortable width="100" />
      <el-table-column label="浏览" prop="viewCount" sortable width="100" />
      <el-table-column label="点赞" prop="likeCount" sortable width="100" />
      <el-table-column label="状态" prop="status" width="70">
        <template #default="scope">
          <el-tag :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="120" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button class="!p-2 !m-1" type="primary" @click="handleUpdate(scope.row.id)">
            <SvgIcon name="edit" />
          </el-button>
          <el-button
            class="!p-2 !m-1"
            type="info"
            @click="
              () => {
                vo = scope.row
                systemStore.dialog.article = true
              }
            "
          >
            <SvgIcon name="info" />
          </el-button>
          <el-button
            v-if="!scope.row.status"
            class="!p-2 !m-1"
            type="success"
            @click="handleChangeStatus(scope.row.id, true)"
          >
            <SvgIcon name="refresh" />
          </el-button>
          <el-button
            v-else
            class="!p-2 !m-1"
            type="danger"
            @click="handleChangeStatus(scope.row.id, false)"
          >
            <SvgIcon name="error" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageBox :total="pageVO.total" @update="pageChange" />
    <DialogTemplate :attribute="DialogEnum.ARTICLE" title="文章详情">
      <el-container class="gap-2" direction="vertical">
        <span>ID: {{ vo.id }}</span>
        <span>标题：{{ vo.title }}</span>
        <span>标签：{{ vo.label.name }}</span>
        <span>类别：{{ vo.label.classifyName }}</span>
        <span>是否可评论：{{ vo.isComment }}</span>
        <span>是否推荐：{{ vo.isRecommend }}</span>
        <span>是否有视频：{{ vo.hasVideo }}</span>
        <span>密码提示：{{ vo.tips }}</span>
        <el-button type="primary" @click="systemStore.dialog.article = false">关闭</el-button>
      </el-container>
    </DialogTemplate>
  </el-container>
</template>

<style lang="scss" scoped>
.custom-style .el-segmented {
  --el-segmented-item-selected-color: var(--text-dark);
  --el-segmented-item-selected-bg-color: var(--hover-color);
  --el-border-radius-base: 16px;
}
</style>
